<!-- created by sunshine-lin in 2018.10.10 -->
<template>
  <div class="comBox"
       id="dataV">
    <div>
      <dv-loading>Loading...</dv-loading>
    </div>
    <div>
      <dv-border-box-1>
        <!-- <dv-decoration-1 style="width:200px;height:50px;" /> -->
      </dv-border-box-1>

    </div>
    <div>
      <dv-border-box-8>
        <!-- <dv-decoration-2 style="width:200px;height:5px;" /> -->
      </dv-border-box-8>
    </div>
    <div>
      <dv-charts :option="option1" />
    </div>
    <div>
      <dv-active-ring-chart :config="config2"
                            style="width:300px;height:300px" />
    </div>
    <div>

      <dv-capsule-chart :config="config3"
                        style="width:300px;height:200px" />
    </div>
    <div>
      <dv-water-level-pond :config="config4"
                           style="width:150px;height:200px" />
    </div>
    <div>
      <el-button @click="btnClick">button</el-button>
      <dv-digital-flop :config="config5"
                       style="width:200px;height:50px;" />
    </div>
    <div>
      <dv-scroll-board :config="config6"
                       style="width:500px;height:220px" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'dataV',
  data() {
    return {
      option1: {
        title: {
          text: '剩余油量表',
          style: {
            fill: '#fff'
          }
        },
        series: [
          {
            type: 'gauge',
            data: [{ name: 'itemA', value: 55 }],
            center: ['50%', '55%'],
            axisLabel: {
              formatter: '{value}%',
              style: {
                fill: '#fff'
              }
            },
            axisTick: {
              style: {
                stroke: '#fff'
              }
            },
            animationCurve: 'easeInOutBack'
          }
        ]
      },
      config2: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ],
      },
      config3: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 123
          },
          {
            name: '漯河',
            value: 98
          },
          {
            name: '郑州',
            value: 75
          },
          {
            name: '西峡',
            value: 66
          },
        ],
      },
      config4: {
        data: [90],
        waveHeight: 10
      },
      config5: {
        number: [100],
        toFixed: 2,
        content: '{nt}个'
      },
      config6: {
        header: ['列1', '列2', '列3'],
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
      }
    }
  },
  created() {
  },
  mounted() {
  },
  deactivated() {
  },
  watch: {},
  methods: {
    btnClick() {
      console.log(`1111`, 1111)
      console.log(`this.config5`, this.config5)
      this.config5 = {
        number: [999],
        toFixed: 2,
        content: '{nt}个'
      }
      // this.config5.number = [999];
      // this.$set(this.config5.number,0,999)
    }
  }
}
</script>

<style rel="stylesheet" lang="scss">
#dataV {
  display: grid;
  overflow: hidden;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 2fr 1fr;
  background: rgba(0, 0, 0, 0.8);
  li {
  }
}
</style>
